<template>
  <div class="content-homesigle" v-loading="loading">
    <el-row
      type="flex"
      justify="start"
      class="single-back-multiple-wrap"
      style="position: absolute;margin-left: -332px;"
    >
      <div class="iconfont icon-return return-btn" @click="backHomeFun" title="返回"></div>
      <p class="org-name">{{ organizationName === undefined ? organizationName:"返回单位首页"}}</p>
    </el-row>
    <div class="content-homesigle-main-models" v-show="detailData.safetyRecordId">
      <realtime-security-assessment
        v-if="detailData.safetyRecordId"
        :detailData="detailData"
        ref="realtimeSecurityAssessment"
      ></realtime-security-assessment>
      <fac-unit
        v-if="detailData[1]"
        :orgId="orgId"
        :safetyRecordId="safetyRecordId"
        :groupId="1"
        ref="facUnit"
      ></fac-unit>
      <safety-evacuation-fac-unit
        v-if="detailData[2]"
        :orgId="orgId"
        :safetyRecordId="safetyRecordId"
        :groupId="2"
        ref="safetyEvacuationFacUnit"
      ></safety-evacuation-fac-unit>
      <fire-safety-manage-unit
        v-if="detailData[3]"
        :orgId="orgId"
        :safetyRecordId="safetyRecordId"
        :groupId="3"
        ref="fireSafetyManageUnit"
      ></fire-safety-manage-unit>
      <building-fire-protect-unit
        v-if="detailData[4]"
        :orgId="orgId"
        :safetyRecordId="safetyRecordId"
        :groupId="4"
        ref="buildingFireProtectUnit"
      ></building-fire-protect-unit>
      <objective-factors
        v-if="detailData[5]"
        :orgId="orgId"
        :safetyRecordId="safetyRecordId"
        :groupId="5"
        ref="objectiveFactors"
      ></objective-factors>
      <direct-decision
        v-if="detailData[6]"
        :orgId="orgId"
        :safetyRecordId="safetyRecordId"
        :groupId="6"
        ref="directDecision"
      ></direct-decision>
      <div class="declare_button">
        <div @click="assessmentStatement">
          <div></div>
          <span>评估申明</span>
        </div>
        <div @click="disclaimer = true">
          <div></div>
          <span>免责申明</span>
        </div>
      </div>
      <el-dialog
        :close-on-click-modal="false"
        title="评估申明"
        width="600px"
        top="10vh"
        :visible.sync="dialogFireDrill"
      >
        <p style="font-size:16px;margin-bottom: 10px;">【评估依据】</p>
        <p>
          本评估依据中华人民共和国消防法（2019）、消防安全责任制实施办法、人员密集场所消防安全评估导则（ GA/T1369-2016）等法规，采用层次分析法，通过对监测数据进行整合、抽离、赋权进行评估。
          <br />
          <br />
        </p>
        <p style="font-size:16px;margin-bottom: 10px;">【评估方案】</p>
        <p>系统从消防设施单元、安全疏散设施单元、消防安全管理单元、建筑防火单元、客观情况以及直接判定项这6个维度对单位的消防安全状况进行实时评分。评分采用扣分制。总分上限为100。各单元扣分上限如下：</p>
        <div class="dialogFireDrill_data" v-for="(item,index) in dialogFireDrillData" :key="index">
          <p class="text-center">{{item.groupName}}</p>
          <p class="text-center">{{item.maxScore}}</p>
        </div>
        <div class="form-search-btn-box">
          <el-button
            class="form-search-btn is-round"
            type="primary"
            @click="dialogFireDrill = false"
          >确认</el-button>
        </div>
      </el-dialog>
      <el-dialog
        :close-on-click-modal="false"
        title="免责申明"
        width="600px"
        top="10vh"
        :visible.sync="disclaimer"
      >
        <p style="text-indent: 28px;">
          1、本评估虽按照相关法律法规指定，相对传统评估更具实时性优势，但仍然不能取代传统的线下人工评估。如不能
          监测到防火分区的完整性等。
          <br />
          <br />
        </p>
        <p style="text-indent: 28px;">2、单位不应该过度依赖于本评估，着眼于单位的现场、实时情况，按照相关法规要求进行严格管理是非常必要的。</p>
        <div class="form-search-btn-box">
          <el-button class="form-search-btn is-round" type="primary" @click="disclaimer = false">确认</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import realtimeSecurityAssessment from './RealtimeSecurityAssessment' //实时安全评估 - 汇总
import facUnit from './FacUnit' //消防设施单元  - groupId: 1
import safetyEvacuationFacUnit from './SafetyEvacuationFacUnit' //安全疏散设施单元  - groupId: 2
import fireSafetyManageUnit from './FireSafetyManageUnit' //消防安全管理单元  - groupId: 3
import buildingFireProtectUnit from './BuildingFireProtectUnit' //建筑防火单元  - groupId: 4
import objectiveFactors from './ObjectiveFactors' //客观因素 - groupId: 5
import directDecision from './DirectDecision' //直接判定项 - groupId: 6

import {
  getScoreItemDetail,
  getSafetyGroup,
  getSafetyGroupMaxScore,
} from '@/api/home'
import { setTimeout } from 'timers'

export default {
  name: 'HomeSingle',
  props: {
    organizationId: {
      default() {
        return undefined
      },
    },
    organizationName: {
      default() {
        return ''
      },
    },
    // backHomeFun: {
    //   type: Function,
    //   default() {
    //     return ()=>{}
    //   }
    // }
  },
  components: {
    realtimeSecurityAssessment,
    facUnit,
    safetyEvacuationFacUnit,
    fireSafetyManageUnit,
    buildingFireProtectUnit,
    objectiveFactors,
    directDecision,
  },
  data() {
    return {
      loading: true,
      title: '业主方看板',
      orgId: this.organizationId || this.$store.state.userinfo.org.id,
      safetyRecordId: 0,
      detailData: {},
      dialogFireDrill: false,
      disclaimer: false,
      dialogFireDrillData: [], // 评估申明数据
    }
  },
  created() {
    this.getDeatilData()
  },
  methods: {
    backHomeFun() {
      let that = this
      this.$parent.getHomeSingFlag(false)
    },
    getDeatilData(callback) {
      getScoreItemDetail({
        orgId: this.orgId,
      }).then((result) => {
        if (result.status == 200 && result.data)
          this.safetyRecordId = result.data.safetyRecordId
        this.detailData = result.data
        callback && callback()
        this.loading = false
      })
    },
    // 评估声明
    assessmentStatement() {
      let _this = this
      getSafetyGroupMaxScore({
        orgId: _this.organizationId || _this.$store.state.userinfo.org.id || '',
      }).then((res) => {
        if (res.status === 200) {
          _this.dialogFireDrillData = res.data
        }
      })
      _this.dialogFireDrill = true
    },
    // 处理单单位推送消息
    dealWithSingleWSData(type, data) {
      let that = this
      let SingleMap = {
        50100: 'realtimeSecurityAssessment',
        50101: 'facUnit',
        50102: 'safetyEvacuationFacUnit',
        50103: 'fireSafetyManageUnit',
        50104: 'buildingFireProtectUnit',
        50105: 'objectiveFactors',
        50106: 'directDecision',
      }
      this.getDeatilData(() => {
        // 判断当前模块是否展示
        if (type != '50100' && that.$refs[SingleMap[type]]) {
          // 更新/刷新对应模块
          that.$refs[SingleMap[type]].refreshModel(data)
        }
      })

      // 单单位首页只要有新推送，实时安全评估必然更新
      // that.$refs['realtimeSecurityAssessment'].refreshModel()
    },
  },
}
</script>

<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style lang="scss">
.content-homesigle {
  background-color: #fff;
  .form-search-btn-box {
    width: 100%;
    display: inline-flex;
    justify-content: flex-end;
    .form-search-btn {
      margin: 20px 0;
    }
  }
  .dialogFireDrill_data {
    display: inline-flex;
    width: 100%;
    justify-content: space-between;
    margin-top: 10px;
    p {
      flex: 1;
      label {
        float: left;
        content: '';
        display: table;
        width: 6px;
        height: 6px;
        background: #606266;
        border-radius: 50%;
        margin-top: 7px;
        margin-right: 10px;
      }
    }
  }
  .declare_button {
    display: inline-flex;
    justify-content: center;
    // margin-right: 20px;
    padding-top: 20px;
    font-size: 20px;
    padding-bottom: 40px;
    width: 100%;
    > div:nth-child(2) {
      margin-left: 40px;
      border: 1px solid #8890ab;
      padding: 8px 14px;
      border-radius: 10px;
    }
    > div:nth-child(1) {
      border: 1px solid #8890ab;
      padding: 8px 14px;
      border-radius: 10px;
    }
    div:nth-child(1) {
      color: #8890ab;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      div {
        width: 18px;
        height: 20px;
        margin-top: 2px;
        margin-right: 4px;
        background: url(../../../assets/images/home/disclaimer.png);
        background-size: 18px 20px;
      }
    }
    div:nth-child(2) {
      color: #8890ab;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      div {
        width: 20px;
        height: 20px;
        margin-top: 2px;
        margin-right: 4px;
        background: url(../../../assets/images/home/dialogFireDrill.png);
        background-size: 20px 20px;
      }
    }
    > div:hover {
      color: #446bde;
      border: 1px solid #446bde;
    }
    div:nth-child(1):hover {
      div {
        width: 18px;
        height: 20px;
        margin-top: 2px;
        margin-right: 4px;
        background: url(../../../assets/images/home/disclaimer-on.png);
        background-size: 18px 20px;
      }
    }
    div:nth-child(2):hover {
      div {
        width: 20px;
        height: 20px;
        margin-top: 2px;
        margin-right: 4px;
        background: url(../../../assets/images/home/dialogFireDrill-on.png);
        background-size: 20px 20px;
      }
    }
  }
  .single-back-multiple-wrap {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 26px;
    .org-name {
      color: #4c6cd7;
      font-weight: bold;
    }
  }
  .content-homesigle-main-models {
    margin: 0 auto;
    width: 1200px;
  }
  .title-card {
    margin-top: 30px;
    border-left: 7px solid #205fa9;
    padding-left: 10px;
    height: 30px;
    font-size: 22px;
    line-height: 30px;
    color: #205fa9;
    .title-points-num {
      margin-left: 10px;
      font-size: 16px;
      color: #ff0000;
    }
    .title-points-desc {
      margin-left: 10px;
      font-size: 14px;
      color: #8890ab;
    }
  }
  .first-title-card {
    margin-top: 0;
  }
  .content-card {
    margin: 10px 0;
    border: 1px solid #e1e1e1;
    padding: 15px;
    line-height: 20px;
    .points-card-item {
      margin: 8px 0 8px 0;
      border: 1px solid #e1e1e1;
      padding: 25px 20px;
      width: calc(33.33333% - 10px);
      min-height: 132px;
      background-color: #fff;
      &:nth-child(3n + 2) {
        margin: 8px 15px;
      }
      .sys-icon {
        margin: 0 auto;
        display: block;
        width: 60px;
        height: 50px;
      }
      .sys-name {
        font-size: 18px;
        font-weight: bold;
        line-height: 34px;
        color: #2f3444;
        .points-num {
          font-size: 16px;
          font-weight: 100;
          float: right;
          color: #ff0000;
        }
        .color-card-point {
          font-size: 16px;
          font-weight: 100;
          float: right;
        }
      }
      .points-desc {
        line-height: 24px;
        color: #8890ab;
      }
    }
    // 改下滑动样式
    .el-carousel__indicators {
      left: 100%;
      margin-left: -10px;
      display: flex;
      flex-direction: column;
      height: 100%;
      width: 30px;
      justify-content: space-around;
      overflow: auto;
      .el-carousel__indicator {
        .el-carousel__button {
          width: 10px;
          height: 10px;
          background-color: #b7b7b7;
          border-radius: 50%;
        }
        &.is-active {
          .el-carousel__button {
            background-color: #446bde;
          }
        }
      }
    }
  }
  .model-title {
    margin-bottom: 0;
    .model-title-icon {
      display: block;
      margin: 0 auto;
      width: 60px;
      height: 60px;
    }
    .model-title-name {
      font-size: 18px;
      font-weight: bold;
      line-height: 34px;
      color: #2f3444;
      .model-title-points-num {
        font-size: 16px;
        float: right;
        color: #fd5e5e;
        font-weight: 100;
      }
    }
    .model-title-desc {
      line-height: 24px;
      color: #8890ab;
    }
  }
  .model-content {
    height: 300px;
    .fire-escape-wrap {
      text-align: center;
      .fire-escape-img {
        width: 100%;
        height: 264px;
      }
      .fire-escape-name {
        margin-top: 65px;
        height: 50px;
        font-size: 18px;
        font-weight: bold;
        line-height: 50px;
        color: #2f3444;
      }
      .fire-escape-status {
        display: flex;
        justify-content: center;
        height: 50px;
        line-height: 50px;
        font-size: 36px;
        font-weight: bold;
        span {
          margin-top: 6px;
          margin-left: 5px;
          font-size: 16px;
          line-height: 16px;
          color: #fd5e5e;
        }
      }
      .fire-escape-time {
        line-height: 24px;
        color: #8890ab;
      }
    }
  }
  .content-card-buildStuff {
    font-size: 16px;
    letter-spacing: 1px;
    .content-card-buildStuff-status {
      width: 100%;
      height: 40px;
      color: #fff;
      > div {
        float: left;
        padding: 8px 10px;
        border-radius: 4px;
      }
      .content-card-buildStuff-status-left {
        margin-right: 8px;
        background: rgba(255, 179, 45, 1);
      }
      .content-card-buildStuff-status-right {
        background: rgba(71, 207, 173, 1);
      }
    }
    .content-card-buildStuff-desc {
      display: flex;
      font-weight: 400;
      height: 60px;
      padding: 10px 0;
      color: rgba(47, 52, 68, 1);
      p {
        width: calc(100% - 25px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .content-card-buildStuff-statusmore {
      color: rgba(76, 164, 254, 1);
      height: 35px;
      line-height: 35px;
    }
    .content-card-buildStuff-imgPreview {
      width: 100%;
      height: 300px;
      margin-bottom: 20px;
      .el-image {
        height: 300px;
        width: 100%;
      }
    }
    .content-card-buildStuff-pics {
      width: 100%;
      overflow: hidden;
      height: 100px;
      .el-image {
        width: 100px;
        height: 100px;
        margin-right: 8px;
      }
    }
  }
  .no-data {
    position: relative;
    padding-top: 50px;
    width: 100%;
    height: 100%;
    background: url(../../../assets/images/home/empty.png) center center
      no-repeat;
    background-size: 280px 280px;
    .no-data-text {
      position: absolute;
      top: 50%;
      margin-top: 80px;
      width: 100%;
      color: #333;
      text-align: center;
      margin-right: 140px;
      font-size: 18px;
      line-height: 30px;
      opacity: 0.6;
    }
  }
  .one-carousel-item {
    .el-carousel__indicators {
      display: none;
    }
  }
}
.content-homesigle-footer {
  margin-top: 40px;
  .content-homesigle-footer-tips {
    font-size: 17px;
    letter-spacing: 1px;
    margin-bottom: 50px;
    .content-homesigle-footer-tips-title {
      line-height: 40px;
      font-weight: bold;
      color: rgba(95, 104, 132, 1);
    }
    .content-homesigle-footer-tips-content {
      color: rgba(136, 144, 171, 1);
    }
  }
}
</style>
